import Vue 				from 'vue'
import util 			from '../../util'
import axios 			from 'axios'
import { List,Toast,DropdownMenu, DropdownItem,Popup,DatetimePicker } 	from 'vant'
Vue.use(List,Toast,DropdownMenu, DropdownItem,Popup,DatetimePicker)

export default {
	name: 'orderList',
	data(){
		return {
			pageState:1,		//1:出入金   2:交易管理
			pageIndex:1,		//页数
			list:[],
			loading:false,
			finished:false,
			loadError:false,
			offset:200,
			account:'',			//账号
			uid:'',
			types:2,
			showTypes:false,	//是否显示 币本位  差价  选择
			navSelect: 0,
		    navSelectId:1,
		    
		    source:0,				//来源 1:开始时间  2:结束时间
		    selectTime:false,		//是否显示选择日期组件
		    startTime:'',			//开始日期
		    endTime:'',				//结束日期
		    timeList:[]
		}
	},
	watch:{
		startTime(newVal){
			if(Number(newVal) > this.endTime){
				this.startTime = this.endTime
			}
		},
		endTime(newVal){
		    let endYear = new Date().getFullYear()+'';
		    let endMonth = new Date().getMonth()+1+'';
		    let endDate = new Date().getDate()+'';
		    endMonth = endMonth.toString().length === 1?'0'+endMonth:endMonth;
		    endDate = endDate.toString().length === 1?'0'+endDate:endDate;
		    let endTime = endYear+endMonth+endDate;

			if(Number(newVal) > Number(endTime)){
				this.endTime = endTime;
			}
		},
		timeList:{
			handler(newVal,oldVal){
				// if(newVal.length){
				// 	// console.log(11111)
				// 	let defaultIndex = newVal[1].defaultIndex;
				// 	let _date = 30;
				// 	let date = {
				// 		defaultIndex:0,
				// 		values:[]
				// 	};

				// 	if(defaultIndex === 0 || defaultIndex === 2 || defaultIndex===4 || defaultIndex===6 || defaultIndex===7 || defaultIndex===9 || defaultIndex===11){
				// 		//31天
				// 		_date = 31
				// 	}
				// 	while (_date > 0) {
				// 		console.log(2222)
				// 		date.values.unshift(_date)
				// 		_date--
				// 	}
				// 	this.timeList.length = 2;
				// 	this.timeList.push(date)
				// 	//润4月的暂时不计
				// }
			},
			immediate:true,
			deep:true
		},
		currentDateStart(newVal,oldVal){
			if(newVal && oldVal && newVal != oldVal &&  Math.abs(oldVal - newVal) > 24*60*59*1000){
				this.changeState(2)
			}
		},
		currentDateEnd(newVal,oldVal){
			if(newVal && oldVal && newVal != oldVal && Math.abs(oldVal - newVal) > 24*60*59*1000){
				this.changeState(2)
			}
		},
		types(newVal,oldVal){
			if(newVal != oldVal){
				this.changeState(2)
			}
		},
		navSelectId(newVal,oldVal){
			if(newVal != oldVal){
				this.changeState(2)
			}
		},
		navSelect(newVal,oldVal){
			if(newVal != oldVal){
				this.changeState(1)
			}
		}
	},
	computed:{
		navList(){
			let _arr = [
				{ text: this.$t('invite-key66'), value: 0 },
		        { text: this.$t('invite-key67'), value: 1 },
		        { text: this.$t('invite-key68'), value: 2 },
		        { text: this.$t('invite-key69'), value: 3 },
		        { text: this.$t('invite-key70'), value: 4 },
			];
			//非中文，则去掉出入金
			if(this.locale != 'zh'){
				_arr.splice(1,2);
			}
			return _arr
		},
		cancelText(){
			return this.$t('invite-key71')
		},
		confirmText(){
			return this.$t('invite-key72')
		},
		nav0(){
			let _nav = [
				// 币本位
				{id:1,name:this.$t('invite-key73'),color:''},
				// 差价
				{id:2,name:this.$t('invite-key74'),color:''},
			];
			_nav.map(item => {
				item.color = item.id === this.types?'#0080FF':'';
			})
			return _nav
		},

		nav(){
			let _nav = [
				// 当前持仓
				{id:1,name:this.$t('invite-key75'),selected:false},
				// 委托列表
				{id:2,name:this.$t('invite-key76'),selected:false},
				// 历史订单
				{id:3,name:this.$t('invite-key77'),selected:false},
			];
			_nav.map(item => {
				item.selected = item.id === this.navSelectId?true:false;
			})
			return _nav
		},
	},
	methods:{
		popupOpen(){
			//唤醒弹窗的时候，默认选中当前年月日
			let _year = this.startTime.slice(0,4);
			let _month = this.startTime.slice(4,6);
			let _date = this.startTime.slice(6,8);
			this.timeList[0].defaultIndex = this.timeList[0].values.findIndex(item => Number(item)=== Number(_year));
			this.timeList[1].defaultIndex = this.timeList[1].values.findIndex(item => Number(item)=== Number(_month));
			this.timeList[2].defaultIndex = this.timeList[2].values.findIndex(item => Number(item)=== Number(_date));
		},
		change(a,b,c){
			this.calcDate(Number(b[1]-1));
		},
		calcDate(_defaultIndex){
			//计算日期
			let defaultIndex = _defaultIndex || this.timeList[1].defaultIndex;
			let _date = 30;
			let date = {
				defaultIndex:0,
				values:[]
			};

			if(defaultIndex === 0 || defaultIndex === 2 || defaultIndex===4 || defaultIndex===6 || defaultIndex===7 || defaultIndex===9 || defaultIndex===11){
				//31天
				_date = 31
			}
			while (_date > 0) {
				_date = _date.toString().length===1?'0'+_date:_date;
				date.values.unshift(_date)
				_date--
			}
			this.timeList.length = 2;
			this.timeList.push(date)
		},
		initDate(){
			//初始化时间
		    let startTimeStamp = +new Date(+new Date()-24*60*60*1000*7);

		    let startMonth = new Date(startTimeStamp).getMonth()+1+'';
		    let startDate = new Date(startTimeStamp).getDate()+'';
		    let endMonth = new Date().getMonth()+1+'';
		    let endDate = new Date().getDate()+'';
		    startMonth = startMonth.toString().length === 1?'0'+startMonth:startMonth;
		    startDate = startDate.toString().length === 1?'0'+startDate:startDate;
		    endMonth = endMonth.toString().length === 1?'0'+endMonth:endMonth;
		    endDate = endDate.toString().length === 1?'0'+endDate:endDate;

		    this.startTime = new Date(startTimeStamp).getFullYear()+startMonth+startDate;
		    this.endTime = new Date().getFullYear()+endMonth+endDate;

		    let timeList = [];
			//年
			let year = {
				values:[],
				defaultIndex:0
			};
			let _currentYear = new Date().getFullYear();
			while (_currentYear > 2018) {
				year.values.unshift(_currentYear+'');
				_currentYear--
			}
			year.defaultIndex = year.values.findIndex(item => Number(item) == new Date().getFullYear());
			timeList.push(year)
			//月
			let month = {
				values: ['01','02','03','04','05','06','07','08','09','10','11','12'],
				defaultIndex:0
			};
			month.defaultIndex = month.values.findIndex(item => Number(item) == new Date().getMonth()+1);
			timeList.push(month)
			this.timeList = timeList;
			this.calcDate();
		},
		confirm(v){
			this.selectTime = false;
			if(this.source === 1){
				this.startTime = v.join('');
			}else{
				this.endTime = v.join('');
			}
			this.changeState(2);
		},
		selectIcon(item){
			this.showTypes = false;
			this.types = item.id;
		},
		showText(value){
			let _find =  this.navList.find(item => item.value == value);
			return _find?_find.text:'';
		},
		load(){
			this.loading = true;
			let self = this;
			setTimeout(()=>{
				let _url = this.pageState == 1?'/trade/list':'/trade/order-list';
				let params = {};
				if(this.pageState == 1){
					params = {
						page:this.pageIndex+'',	
						type:this.navSelect+'',		//0:全部 1:OTC 入金 2:OTC 出金 3:充币 4:提币
						uid:this.uid,
						size:'20',
					}
				}else{
					params = {
						type:this.navSelectId+'',		//1:当前持仓  2: 委托列表  3:历史订单
						uid:this.uid,
						page:this.pageIndex+'',
						size:'20'
					}
					if(this.navSelectId == 3){
						params.start_time = this.startTime;
						params.end_time =   this.endTime;
					}
				}
				let md5Key = util.getHashStr(params)
                params['sign'] = md5Key;

				util.fetch(util.ajaxUrl+_url,params).then(res => {
					this.loading = false;
					if(res.retCode === 0){
						this.pageIndex++
						this.loadError = false;
						res.retData.lists.map(item => {
							item.showTime = '';
							if(item.create_time) {
								let _time = util.transTime4(item.create_time);
								item.showTime = _time[1]+'/'+ _time[2] +' '+ _time[3] +':'+_time[4]
							}
						})
						this.list = this.list.concat(res.retData.lists);
						if(!res.retData || res.retData.lists && res.retData.lists.length < 20){
							this.finished = true;
						}
					}else{
						this.loadError = true;
						Toast(res.retMsg || this.$t('noError'))
					}
				}).catch(error => {
					this.loading = false;
					this.loadError = true;
					console.log(error)
				})
			},500)
		},
		changeState(state){
			//改变tab
			if(this.loading) return
			this.pageIndex = 1;
			this.list = [];
			this.pageState = state;
			this.finished = false;
			this.loading = true;
			this.load();
		},
		goBack(){
			util.navigateBack(-1,this)
		}
	},
	created() {
		document.querySelector('body').setAttribute('style','background:#fff');
		if(this.$route.query.account) this.account = this.$route.query.account;
		if(this.$route.query.uid) this.uid = this.$route.query.uid;
		if(!this.account || !this.uid){
			Toast('data error');
			return
		}
		this.initDate();
		util.waitSDKReady().then(token => {
			this.token = token;
		}).catch((e) => {
			console.log('获取token失败')
		})
		setTimeout(()=>{
			util.registerHandler('refreshCommonRequestWhenGoBackView',res => {
				util.callHandler('setStatusBarStyle',{
					style:'dark'
				})
			})
			//退出登录的时候native调用H5方法清除token缓存
			util.registerHandler('loginOutDeleteToken',res => {
				this.token = '';
				localStorage.removeItem('token');
			})
			util.callHandler('setStatusBarStyle',{
				style:'dark'
			})
		},500)
    }
}